<template>
	<div>
		<div><div id="containerPie"></div></div>
	</div>
</template>

<script>
	import DataSet from '@antv/data-set';
	import { Chart } from '@antv/g2';
	export default{
		name:'G2pie',
		data() {
			return{
				chart:null,
				// d:[
				// 	{ type: '一线城市', value: 0.19 },
				// 	{ type: '二线城市', value: 0.21 },
				// 	{ type: '三线城市', value: 0.27 },
				// 	{ type: '四线及以下', value: 0.33 },
				// ]
			}
		},
		props:{
			data:Array,
			WHAttr:Object
		},
		mounted() {
			this.getG2Pie()
		},
		methods:{
			getG2Pie(){
				// let colors=['#025DF4', '#DB6BCF', '#2498D1', '#BBBDE6', '#4045B2', '#21A97A', '#FF745A', '#007E99', '#FFA8A8', '#2391FF']
				let key={
					移动游戏:'#025DF4',
					移动购物:'#DB6BCF',
					移动营销:'#2498D1',
					共享单车:'#BBBDE6'
				}
				this.chart= new Chart({
					container: 'containerPie',
					autoFit: true,
					height: this.WHAttr.height,
					width:this.WHAttr.width
				})
				const ds=new DataSet();
				const dv=ds.createView()
				dv.source(this.data).transform({
						type: 'percent',
						field: 'value',
						dimension: 'type',
						as: 'percent',
					});
					console.log(dv.rows)
				this.chart.data(dv.rows)
				this.chart.coordinate('theta', {
						radius: 0.6,
						innerRadius: 0.3,
					})
				this.chart.tooltip({
							showMarkers: false
						})
				this.chart.interval()
						.adjust('stack')
						.position('percent')
						.color('type',(val)=>key[val])
						.label('type', {
							offset: -1,
							style: {
								fill: 'white',
								shadowBlur: 2,
								shadowColor: 'rgba(0, 0, 0, .45)',
							},
						})
						
				const ds2=new DataSet();
				const dv2=ds2.createView()		
				dv2.source(this.data).transform({
						type: 'percent',
						field: 'value',
						dimension: 'time',
						as: 'percent',
					});	
					console.log(dv2)
				const outterView = this.chart.createView();
				outterView.data(dv2.rows)
				outterView.coordinate('theta', {
					innerRadius: 0.6 / 0.9,
					radius: 0.9,
				})
				outterView
				.interval()
				.adjust('stack')
				.position('percent')
				// .color('type*time', (val,time) => console.log(val))
				.color('type*time', (type,time) => key[type])
				.style({
					stroke: 'white',
					lineWidth: 1,
				})
				.label('time', {
					offset: -2,
					style: {
						fill: 'white',
						shadowBlur: 2,
						shadowColor: 'rgba(0, 0, 0, .45)',
					},
				})
				this.chart.interaction('element-active')
				this.chart.render()
			}
		}
		
	}
</script>

<style>
</style>
